// 使用while输出1-10的数字
function fn() {
  let i = 0
  let str = ''
  while (i < 10) {
    i++
    str += `<div>${i}</div>`
  }
  document.getElementsByClassName('box')[0].innerHTML = str
}

// 使用do-while循环输出1-10数字
function fn1() {
  let i = 0
  let str = ''
  do {
    i++
    str += `<div>${i}</div>`
  } while (i < 10)
  document.getElementsByClassName('box')[0].innerHTML = str
}

// 使用for循环输出1-10数字
function fn2() {
  let str = ''
  for (let i = 0; i < 10; i++) {
    str += `<div>${i + 1}</div>`
  }
  document.getElementsByClassName('box')[0].innerHTML = str
}

// for 快速遍历数组
function fn3() {
  // 定义数组，元素是1，2，3，4，5 arr[0] = 1
  let arr = [1, 2, 3, 4, 5, null, undefined, NaN, false, { id: 1 }, [1, 2, 3]]
  // 获得数组arr的元素个数，又称数组长度
  let len = arr.length // 11
  // 数组的第1个元素的下标是0，最后一个元素的下标arr.length-1
  let lastIndex = arr.length - 1
  console.log(arr[0], arr[lastIndex])
  console.log('-----------------------------------------------------')
  console.log(typeof arr) // object
  for (let i = 0; i < len; i++) {
    console.log(`arr[${i}] = ${arr[i]}`)
  }
}

// for-in 快速遍历数组
function fn4() {
  let arr = [1, 2, 3, 4, 5, null, undefined, NaN, false, { id: 1 }, [1, 2, 3]]
  // for-in遍历数组时，i是数组元素的下标
  for (let i in arr) {
    // typeof i ---> string
    console.log(`arr[${i}] = ${arr[i]}`)
  }
}

// for-in遍历对象的属性
function fn5() {
  console.log(this)
  // 定义对像,直接字面量定义对象
  let object = {
    id: 1,
    name: 'tom',
    age: 20,
    gender: '男',
    married: false,
    info() {
      // 函数中的this是函数的调用者
      console.log('name=' + this.name)
    },
  }
  // 获取对象的属性
  let id = object.id
  // console.log(id)
  let name = object.name
  // console.log(name)
  let age = object['age'] // 类似 object.age
  // console.log(age) // 20
  // 对象的属性进行赋值
  object.age = 21
  let newAge = object.age
  // console.log(newAge) // 21
  // 对象调用自己的函数
  // object.info()

  // for-in遍历对象时，key是对象的属性名称，是字符串
  for (let key in object) {
    // key = 'id'
    // key = 'name'
    // ...
    console.log(`object.${key} = ${object[key]}`)
  }
}

// window是浏览器窗口对象，是全局对象，默认情况下可以省略不写
window.fn5()
